<template>
  <el-header style="text-align: right; font-size: 12px">
    <!-- ============头部查询部分============开始 -->
    <div class="form">
      <el-form :inline="true" :model="ruleForm">
        <el-form-item label="用户名">
          <el-input
            class="input"
            v-model="ruleForm.username"
            type="text"
            size="mini"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            class="input"
            v-model="ruleForm.name"
            type="text"
            size="mini"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select class="input select" v-model="ruleForm.status" size="mini" placeholder="全部">
            <el-option value="有效"></el-option>
            <el-option value="无效"></el-option>
          </el-select>
        </el-form-item>
        <!-- <span>组件值：{{ ruleForm.buildtime}}</span> -->
        <el-form-item label="创建时间">
          <div class="block input">
            <el-date-picker
              id="buildtime"
              size="mini"
              v-model="ruleForm.queryTime"
              :unlink-panels="true"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item class="allbtn">
          <!-- <a><i class="el-icon-search"></i></a> -->
          <el-button
            class="btn"
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="selectForm()"
          >查询</el-button>
          <el-button
            class="btn"
            size="mini"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="insertList()"
            v-if='this.$store.state.insertUserFlag'
          >新增</el-button>
          <el-button
            class="btn"
            size="mini"
            type="primary"
            icon="el-icon-remove-outline"
            @click="deleteList()"
            v-if='this.$store.state.deletetUserFlag'
          >删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- ============头部查询部分============结束 -->
  </el-header>
</template>
<script>
import { Message } from "element-ui";
export default {
  components: {},
  props: ["selections"],
  data() {
    return {
      ruleForm: {
        username: "",
        name: "",
        status: "",
        queryTime: "",
      },
      page: {
        size: 0,
        current: 0,
      },
    };
  },
  methods: {
    insertList() {
      this.$emit("showModel", true);
    },
    deleteList() {
      var selectUsers = [];
      for (let i = 0; i < this.selections.length; i++) {
        selectUsers.push(this.selections[i].userId);
      }
      const that = this;
      const p = new URLSearchParams();
      p.append("userIds", selectUsers);
      that.$http
        .get("/user/removeUser", {
          params: p,
        })
        .then(function (response) {
          var data = response.data;
          if (data > 1) {
            Message({ message: "删除成功", type: "success" });
            that.$emit("refreshList");
          } else {
            Message({ message: "删除失败", type: "error" });
          }
        });
    },
    selectForm() {
      this.$emit("sendSelectData", this.ruleForm);
    },
  },
  mounted() {
    this.$emit("sendSelectData", this.ruleForm);
  },
};
</script>
<style lang='less' scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.input {
  margin-top: 10px;
  width: 91px;
}
.select {
  width: 75px;
}
#buildtime {
  width: 123px;
}
.btn {
  margin-top: 16px;
  width: 75px;
}
.allbtn {
  margin-left: 280px;
}
.form {
  float: left;
}
</style>